<template>
  <div class="profile-container">
    <!-- 主内容区域 -->
    <main class="profile-main container">
      <div class="profile-content">
        <!-- 侧边导航 - 调整宽度 -->
        <aside class="profile-sidebar">
          <nav class="profile-nav">
            <h2 class="profile-nav-title">
              <i class="fa fa-user-circle"></i> 个人中心
            </h2>
            <ul>
              <li :class="{ 'active': activeTab === 'info' }" @click="changeTab('info')">
                <i class="fa fa-user"></i> 个人信息
              </li>
              <li :class="{ 'active': activeTab === 'edit' }" @click="changeTab('edit')">
                <i class="fa fa-pen"></i> 编辑资料
              </li>
              <li :class="{ 'active': activeTab === 'address' }" @click="changeTab('address')">
                <i class="fa fa-map-marker-alt"></i> 地址管理
              </li>
              <li  v-if="isAdmin" :class="{ 'active': activeTab === 'allOrder' }" @click="changeTab('allOrder')">
                <i class="fa fa-map-marker-alt"></i> 全部订单
              </li>
              <li  v-if="isAdmin" :class="{ 'active': activeTab === 'allProduct' }" @click="changeTab('allProduct')">
                <i class="fa fa-map-marker-alt"></i> 管理商品
              </li>
              <li @click="logout">
                <i class="fa fa-sign-out-alt"></i> 退出登录
              </li>
            </ul>
          </nav>
        </aside>

        <!-- 内容区域 -->
        <div class="profile-tabs">
          <!-- 个人信息显示 -->
          <div v-if="activeTab === 'info'" class="profile-info-tab">
            <div class="card">
              <div class="card-header">
                <h3>
                  <i class="fa fa-user-circle"></i> 基本信息
                </h3>
              </div>
              <div class="card-body">
                <div class="info-item">
                  <span class="info-label">
                    <i class="fa fa-user"></i> 用户名：
                  </span>
                  <span class="info-value" v-if="userInfo">{{ userInfo.username || '未设置' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">
                    <i class="fa fa-lock"></i> 密码：
                  </span>
                  <span class="info-value" v-if="userInfo">{{ userInfo.password || '未设置' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">
                    <i class="fa fa-phone"></i> 手机号：
                  </span>
                  <span class="info-value" v-if="userInfo">{{ userInfo.phone || '未设置' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">
                    <i class="fa fa-envelope"></i> 邮箱：
                  </span>
                  <span class="info-value" v-if="userInfo">{{ userInfo.email || '未设置' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">
                    <i class="fa fa-calendar-alt"></i> 注册时间：
                  </span>
                  <span class="info-value" v-if="userInfo">{{ userInfo.createdAt || '未知' }}</span>
                </div>
              </div>
            </div>
            <div class="action-buttons">
              <button class="btn btn-primary" @click="changeTab('edit')">
                <i class="fa fa-edit"></i> 编辑资料
              </button>
            </div>
          </div>

          <!-- 编辑资料 -->
          <div v-if="activeTab === 'edit'" class="profile-edit-tab">
            <div class="card edit-form-center">
              <div class="card-header">
                <h3>
                  <i class="fa fa-pen"></i> 编辑个人资料
                </h3>
              </div>
              <div class="card-body">
                <form @submit.prevent="saveProfile">
                  <div class="form-group">
                    <label for="username">
                      <i class="fa fa-user"></i> 用户名
                    </label>
                    <input
                        type="text"
                        id="username"
                        v-model="editUserInfo.username"
                        class="form-control"
                        placeholder="请输入用户名"
                    />
                  </div>
                  <div class="form-group">
                    <label for="password">
                      <i class="fa fa-lock"></i> 密码
                    </label>
                    <input
                        type="password"
                        id="password"
                        v-model="editUserInfo.password"
                        class="form-control"
                        placeholder="请输入密码"
                    />
                  </div>
                  <div class="form-group">
                    <label for="phone">
                      <i class="fa fa-phone"></i> 手机号
                    </label>
                    <input
                        type="tel"
                        id="phone"
                        v-model="editUserInfo.phone"
                        class="form-control"
                        placeholder="请输入手机号"
                    />
                  </div>
                  <div class="form-group">
                    <label for="email">
                      <i class="fa fa-envelope"></i> 邮箱
                    </label>
                    <input
                        type="email"
                        id="email"
                        v-model="editUserInfo.email"
                        class="form-control"
                        placeholder="请输入邮箱"
                    />
                  </div>
                  <div class="form-actions">
                    <button type="submit" class="btn btn-primary">
                      <i class="fa fa-save"></i> 保存更改
                    </button>
                    <button type="button" class="btn btn-secondary" @click="cancelEdit">
                      <i class="fa fa-times"></i> 取消
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>

          <!-- 地址管理 -->
          <div v-if="activeTab === 'address'" class="profile-address-tab">
            <div class="card">
              <div class="card-header">
                <h3>
                  <i class="fa fa-map-marker-alt"></i> 我的地址
                </h3>
                <button type="submit" @click="changeTab('addAddress')" class="btn btn-primary">
                  <i class="fa fa-plus"></i> 新增地址
                </button>
              </div>
              <div class="card-body">
                <div v-if="addressList.length === 0" class="empty-address">
                  <p>
                    <i class="fa fa-info-circle"></i> 您还没有添加地址
                  </p>
                </div>
                <div v-else class="address-form">
                  <table class="address-table">
                    <thead>
                    <tr>
                      <th style="width: 12%;">
                        <i class="fa fa-user"></i> 收货人
                      </th>
                      <th style="width: 12%;">
                        <i class="fa fa-phone"></i> 手机号
                      </th>
                      <th style="width: 12%;">
                        <i class="fa fa-map-marked-alt"></i> 省份
                      </th>
                      <th style="width: 12%;">
                        <i class="fa fa-city"></i> 城市
                      </th>
                      <th style="width: 12%;">
                        <i class="fa fa-building"></i> 区县
                      </th>
                      <th style="width: 12%;">
                        <i class="fa fa-street-view"></i> 详细地址
                      </th>
                      <th style="width: 12%;">
                        <i class="fa fa-check-circle"></i> 默认地址
                      </th>
                      <th style="width: 16%;">
                        <i class="fa fa-cog"></i> 操作
                      </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="address in addressList" :key="address.addressId" class="address-row">
                      <td>{{ address.receiverName }}</td>
                      <td>{{ address.receiverPhone }}</td>
                      <td>{{ address.province }}</td>
                      <td>{{ address.city }}</td>
                      <td>{{ address.district }}</td>
                      <td>{{ address.detailAddress }}</td>
                      <td>
                        <span v-if="address.isDefault">是</span>
                        <span v-else>否</span>
                      </td>
                      <td>
                        <button type="button" @click="deleteAddress(address.addressId)" class="btn btn-danger btn-sm">
                          <i class="fa fa-trash"></i> 删除
                        </button>
                        <button type="submit" @click="editAddress(address.addressId)" class="btn btn-primary btn-sm">
                          <i class="fa fa-edit"></i> 修改
                        </button>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <!-- 修改地址 -->
            <div v-if="activeTab === 'editAddress'" class="profile-edit-tab">
              <div class="card">
                <div class="card-header">
                  <h3>
                    <i class="fa fa-map-marker-alt"></i> 修改地址信息
                  </h3>
                </div>
                <div class="card-body">
                  <form @submit.prevent="saveAddress">
                    <div class="form-group">
                      <label for="receiverName">
                        <i class="fa fa-user"></i> 收货人
                      </label>
                      <input
                          type="text"
                          id="receiverName"
                          v-model="editAddressInfo.receiverName"
                          class="form-control"
                          placeholder="请输入收货人姓名"
                      />
                    </div>
                    <div class="form-group">
                      <label for="receiverPhone">
                        <i class="fa fa-phone"></i> 手机号
                      </label>
                      <input
                          type="tel"
                          id="receiverPhone"
                          v-model="editAddressInfo.receiverPhone"
                          class="form-control"
                          placeholder="请输入手机号"
                      />
                    </div>
                    <div class="form-group">
                      <label for="province">
                        <i class="fa fa-map-marked-alt"></i> 省份
                      </label>
                      <input
                          type="province"
                          id="province"
                          v-model="editAddressInfo.province"
                          class="form-control"
                          placeholder="请输入您所在的省份"
                      />
                    </div>
                    <div class="form-group">
                      <label for="city">
                        <i class="fa fa-city"></i> 城市
                      </label>
                      <input
                          type="city"
                          id="city"
                          v-model="editAddressInfo.city"
                          class="form-control"
                          placeholder="请输入您所在的城市"
                      />
                    </div>
                    <div class="form-group">
                      <label for="district">
                        <i class="fa fa-building"></i> 区县
                      </label>
                      <input
                          type="district"
                          id="district"
                          v-model="editAddressInfo.district"
                          class="form-control"
                          placeholder="请输入您所在的区县"
                      />
                    </div>
                    <div class="form-group">
                      <label for="detailAddress">
                        <i class="fa fa-street-view"></i> 详细地址
                      </label>
                      <input
                          type="detailAddress"
                          id="detailAddress"
                          v-model="editAddressInfo.detailAddress"
                          class="form-control"
                          placeholder="请输入详细地址"
                      />
                    </div>
                    <div class="form-group">
                      <label for="isDefault">
                        <i class="fa fa-check-circle"></i> 是否设置为默认地址
                      </label>
                      <input
                          type="checkbox"
                          id="isDefault"
                          v-model="editAddressInfo.isDefault"
                          class="form-control"
                      />
                    </div>
                    <div class="form-actions">
                      <button type="submit" class="btn btn-primary">
                        <i class="fa fa-save"></i> 保存更改
                      </button>
                      <button type="button" class="btn btn-secondary" @click="cancelAddressEdit">
                        <i class="fa fa-times"></i> 取消
                      </button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <!-- 新增地址 -->
            <div v-if="activeTab === 'addAddress'" class="profile-edit-tab">
              <div class="card">
                <div class="card-header">
                  <h3>
                    <i class="fa fa-plus"></i> 添加地址
                  </h3>
                </div>
                <div class="card-body">
                  <form @submit.prevent="addAddress">
                    <div class="form-group">
                      <label for="receiverName">
                        <i class="fa fa-user"></i> 收货人
                      </label>
                      <input
                          type="text"
                          id="receiverName"
                          v-model="addAddressInfo.receiverName"
                          class="form-control"
                          placeholder="请输入收货人姓名"
                      />
                    </div>
                    <div class="form-group">
                      <label for="receiverPhone">
                        <i class="fa fa-phone"></i> 手机号
                      </label>
                      <input
                          type="tel"
                          id="receiverPhone"
                          v-model="addAddressInfo.receiverPhone"
                          class="form-control"
                          placeholder="请输入手机号"
                      />
                    </div>
                    <div class="form-group">
                      <label for="province">
                        <i class="fa fa-map-marked-alt"></i> 省份
                      </label>
                      <input
                          type="province"
                          id="province"
                          v-model="addAddressInfo.province"
                          class="form-control"
                          placeholder="请输入您所在的省份"
                      />
                    </div>
                    <div class="form-group">
                      <label for="city">
                        <i class="fa fa-city"></i> 城市
                      </label>
                      <input
                          type="city"
                          id="city"
                          v-model="addAddressInfo.city"
                          class="form-control"
                          placeholder="请输入您所在的城市"
                      />
                    </div>
                    <div class="form-group">
                      <label for="district">
                        <i class="fa fa-building"></i> 区县
                      </label>
                      <input
                          type="district"
                          id="district"
                          v-model="addAddressInfo.district"
                          class="form-control"
                          placeholder="请输入您所在的区县"
                      />
                    </div>
                    <div class="form-group">
                      <label for="detailAddress">
                        <i class="fa fa-street-view"></i> 详细地址
                      </label>
                      <input
                          type="detailAddress"
                          id="detailAddress"
                          v-model="addAddressInfo.detailAddress"
                          class="form-control"
                          placeholder="请输入详细地址"
                      />
                    </div>
                    <div class="form-group">
                      <label for="isDefault">
                        <i class="fa fa-check-circle"></i> 是否设置为默认地址
                      </label>
                      <input
                          type="checkbox"
                          id="isDefault"
                          v-model="addAddressInfo.isDefault"
                          class="form-control"
                      />
                    </div>
                    <div class="form-actions">
                      <button type="submit" class="btn btn-primary">
                        <i class="fa fa-save"></i> 添加
                      </button>
                      <button type="button" class="btn btn-secondary" @click="cancelAddressEdit">
                        <i class="fa fa-times"></i> 取消
                      </button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>

          <!-- 修改地址 -->
          <div v-if="activeTab === 'editAddress'" class="profile-edit-tab">
            <div class="card">
              <div class="card-header">
                <h3>
                  <i class="fa fa-map-marker-alt"></i> 修改地址信息
                </h3>
              </div>
              <div class="card-body">
                <form @submit.prevent="saveAddress">
                  <div class="form-group">
                    <label for="receiverName">
                      <i class="fa fa-user"></i> 收货人
                    </label>
                    <input
                        type="text"
                        id="receiverName"
                        v-model="editAddressInfo.receiverName"
                        class="form-control"
                        placeholder="请输入收货人姓名"
                    />
                  </div>
                  <div class="form-group">
                    <label for="receiverPhone">
                      <i class="fa fa-phone"></i> 手机号
                    </label>
                    <input
                        type="tel"
                        id="receiverPhone"
                        v-model="editAddressInfo.receiverPhone"
                        class="form-control"
                        placeholder="请输入手机号"
                    />
                  </div>
                  <div class="form-group">
                    <label for="province">
                      <i class="fa fa-map-marked-alt"></i> 省份
                    </label>
                    <input
                        type="province"
                        id="province"
                        v-model="editAddressInfo.province"
                        class="form-control"
                        placeholder="请输入您所在的省份"
                    />
                  </div>
                  <div class="form-group">
                    <label for="city">
                      <i class="fa fa-city"></i> 城市
                    </label>
                    <input
                        type="city"
                        id="city"
                        v-model="editAddressInfo.city"
                        class="form-control"
                        placeholder="请输入您所在的城市"
                    />
                  </div>
                  <div class="form-group">
                    <label for="district">
                      <i class="fa fa-building"></i> 区县
                    </label>
                    <input
                        type="district"
                        id="district"
                        v-model="editAddressInfo.district"
                        class="form-control"
                        placeholder="请输入您所在的区县"
                    />
                  </div>
                  <div class="form-group">
                    <label for="detailAddress">
                      <i class="fa fa-street-view"></i> 详细地址
                    </label>
                    <input
                        type="detailAddress"
                        id="detailAddress"
                        v-model="editAddressInfo.detailAddress"
                        class="form-control"
                        placeholder="请输入详细地址"
                    />
                  </div>
                  <div class="form-group">
                    <label for="isDefault">
                      <i class="fa fa-check-circle"></i> 是否设置为默认地址
                    </label>
                    <input
                        type="checkbox"
                        id="isDefault"
                        v-model="editAddressInfo.isDefault"
                        class="form-control"
                    />
                  </div>
                  <div class="form-actions">
                    <button type="submit" class="btn btn-primary">
                      <i class="fa fa-save"></i> 保存更改
                    </button>
                    <button type="button" class="btn btn-secondary" @click="cancelAddressEdit">
                      <i class="fa fa-times"></i> 取消
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>

          <!-- 新增地址 -->
          <div v-if="activeTab === 'addAddress'" class="profile-edit-tab">
            <div class="card">
              <div class="card-header">
                <h3>
                  <i class="fa fa-plus"></i> 添加地址
                </h3>
              </div>
              <div class="card-body">
                <form @submit.prevent="saveAddAddress">
                  <div class="form-group">
                    <label for="receiverName">
                      <i class="fa fa-user"></i> 收货人
                    </label>
                    <input
                        type="text"
                        id="receiverName"
                        v-model="addAddressInfo.receiverName"
                        class="form-control"
                        placeholder="请输入收货人姓名"
                    />
                  </div>
                  <div class="form-group">
                    <label for="receiverPhone">
                      <i class="fa fa-phone"></i> 手机号
                    </label>
                    <input
                        type="tel"
                        id="receiverPhone"
                        v-model="addAddressInfo.receiverPhone"
                        class="form-control"
                        placeholder="请输入手机号"
                    />
                  </div>
                  <div class="form-group">
                    <label for="province">
                      <i class="fa fa-map-marked-alt"></i> 省份
                    </label>
                    <input
                        type="province"
                        id="province"
                        v-model="addAddressInfo.province"
                        class="form-control"
                        placeholder="请输入您所在的省份"
                    />
                  </div>
                  <div class="form-group">
                    <label for="city">
                      <i class="fa fa-city"></i> 城市
                    </label>
                    <input
                        type="city"
                        id="city"
                        v-model="addAddressInfo.city"
                        class="form-control"
                        placeholder="请输入您所在的城市"
                    />
                  </div>
                  <div class="form-group">
                    <label for="district">
                      <i class="fa fa-building"></i> 区县
                    </label>
                    <input
                        type="district"
                        id="district"
                        v-model="addAddressInfo.district"
                        class="form-control"
                        placeholder="请输入您所在的区县"
                    />
                  </div>
                  <div class="form-group">
                    <label for="detailAddress">
                      <i class="fa fa-street-view"></i> 详细地址
                    </label>
                    <input
                        type="detailAddress"
                        id="detailAddress"
                        v-model="addAddressInfo.detailAddress"
                        class="form-control"
                        placeholder="请输入详细地址"
                    />
                  </div>
                  <div class="form-group">
                    <label for="isDefault">
                      <i class="fa fa-check-circle"></i> 是否设置为默认地址
                    </label>
                    <input
                        type="checkbox"
                        id="isDefault"
                        v-model="addAddressInfo.isDefault"
                        class="form-control"
                    />
                  </div>
                  <div class="form-actions">
                    <button type="submit" class="btn btn-primary">
                      <i class="fa fa-save"></i> 添加
                    </button>
                    <button type="button" class="btn btn-secondary" @click="cancelAddressEdit">
                      <i class="fa fa-times"></i> 取消
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>


    <!-- 页面底部 -->
    <footer class="profile-footer">
      <div class="container">
        <p>
          <i class="fa fa-copyright"></i> 个人中心 | 第二组
        </p>
      </div>
    </footer>
  </div>
</template>

<script>
import axios from 'axios';
// import FootComponent from "@/components/product/FootComponent"; // 引入底部导航组件
import OrderView from "@/views/order/OrderView";

export default {
  name: 'UserProfile',
    // components: {FootComponent},
  data() {
    return {
      userInfo: null,
      editUserInfo: {},
      activeTab: 'info',
      isSuccessMessageVisible: false,
      isErrorMessageVisible: false,
      successMessage: '',
      errorMessage: '',
      addressList: [],
      addAddressInfo: {
        isDefault: false
      },
      editAddressInfo: {},
      // cartCount: '', // 购物车数量
      isAdmin: false // 是否是管理员
    }
  },
  methods: {
    //获取购物车数量
    async getCartCount() {
      try {
        const response = await axios.get('/api/cart/getCartCount');
        this.cartCount = response.data;
      } catch (error) {
        console.error('获取购物车数量失败:', error);
      }
    },
    //用户登录
    loadUserInfo() {
      const userInfo = JSON.parse(sessionStorage.getItem('loginUser'));
      if (userInfo) {
        this.userInfo = userInfo;
        this.editUserInfo = { ...userInfo };
      } else {
        this.$router.push('/login');
      }
    },
    //加载地址列表
    async loadAddressList() {
      if (!this.userInfo) return;
      try {
        const response = await axios.get('/api/userAddress/searchByUserId');
        this.addressList = response.data;
      } catch (error) {
        console.error('加载地址列表失败:', error);
        this.showErrorMessage('加载地址失败，请稍后重试');
      }
    },
    //保存新增地址
    async saveAddAddress() {
      try {
        const response = await axios.post('/api/userAddress/addAddress', this.addAddressInfo);
        if (response.data === 'success') {
          alert('新增地址成功！');
          this.showSuccessMessage('新增地址成功');
          this.loadAddressList();
          this.addAddressInfo = {
            receiverName: '',
            receiverPhone: '',
            province: '',
            city: '',
            district: '',
            detailAddress: '',
            isDefault: false
          };
          this.activeTab = 'address';
        } else {
          alert('新增地址失败！');
          this.showErrorMessage('新增地址失败，请稍后重试');
        }
      } catch (error) {
        console.error('新增地址失败:', error);
        this.showErrorMessage('新增地址失败，请检查网络连接');
      }
    },
    //删除地址
    async deleteAddress(addressId) {
      if (!confirm('确定要删除该地址吗？')) return;
      try {
        const response = await axios.delete('/api/userAddress/deleteById?addressId=' + addressId);
        if (response.data === 'success') {
          alert('删除地址成功！');
          this.showSuccessMessage('删除地址成功');
          this.loadAddressList();
        } else {
          alert('删除地址失败！');
          this.showErrorMessage('删除地址失败，请稍后重试');
        }
      } catch (error) {
        console.error('删除地址失败:', error);
        this.showErrorMessage('删除地址失败，请检查网络连接');
      }
    },
    //更新地址
    async saveAddress() {
      try {
        const response = await axios.put('/api/userAddress/updateAddress', this.editAddressInfo);
        if (response.data === 'success') {
          alert('修改地址成功！');
          this.loadAddressList();
          sessionStorage.setItem('userAddresses', JSON.stringify(this.editAddressInfo));
          this.showSuccessMessage('修改地址成功');
          this.activeTab = 'address';
        } else {
          alert('修改地址失败！');
          this.showErrorMessage('修改地址失败，请稍后重试');
        }
      } catch (error) {
        console.error('修改地址失败:', error);
        this.showErrorMessage('修改地址失败，请检查网络连接');
      }
    },
    //编辑地址
    editAddress(addressId) {
      this.editAddressInfo = { ...this.addressList.find(address => address.addressId === addressId) };
      this.activeTab = 'editAddress';
    },
    //取消编辑地址
    cancelAddressEdit() {
      this.editAddressInfo = { ...this.addressList };
      this.activeTab = 'info';
    },
    //更新个人资料
    async saveProfile() {
      try {
        const response = await axios.put('/api/user/updateInfo', this.editUserInfo);
        if (response.data === 'success') {
          sessionStorage.setItem('loginUser', JSON.stringify(this.editUserInfo));
          this.userInfo = { ...this.editUserInfo };
          this.showSuccessMessage('个人资料更新成功');
          alert("个人资料更新成功!");
          this.activeTab = 'info';
        } else {
          this.showErrorMessage('更新失败，请稍后重试');
        }
      } catch (error) {
        console.error('更新个人资料失败:', error);
        this.showErrorMessage('更新失败，请检查网络连接');
      }
    },
    //取消编辑个人资料
    cancelEdit() {
      this.editUserInfo = { ...this.userInfo };
      this.activeTab = 'info';
    },
    //退出登录
    logout() {
      sessionStorage.removeItem('loginUser');
      // axios.post('/api/user/logout');
      this.$router.push('/login');
    },
    showSuccessMessage(message) {
      this.successMessage = message;
      this.isSuccessMessageVisible = true;
      this.isErrorMessageVisible = false;
      setTimeout(() => {
        this.isSuccessMessageVisible = false;
      }, 3000);
    },

    showErrorMessage(message) {
      this.errorMessage = message;
      this.isErrorMessageVisible = true;
      this.isSuccessMessageVisible = false;
      setTimeout(() => {
        this.isErrorMessageVisible = false;
      }, 3000);
    },

    changeTab(tab) {
      this.activeTab = tab;
      if (tab === 'edit') {
        this.editUserInfo = { ...this.userInfo };
      } else if (tab === 'address') {
        this.loadAddressList();
      } else if (tab === 'editAddress' && this.addressList.length > 0) {
        this.editAddressInfo = { ...this.addressList[0] };
      }else if (tab === 'addAddress') {
        this.addAddressInfo = {
          receiverName: '',
          receiverPhone: '',
          province: '',
          city: '',
          district: '',
          detailAddress: '',
          isDefault: false
        };
      }else if (tab === 'allOrder' ) {
        this.$router.push('/orders');
      }else if (tab === 'allProduct' ) {
        this.$router.push('/product');
      }
    },
    getUserType(){ //获取用户的类型
      axios.get('/api/user/getUserType').then(res => {
        if(res.data === 1){
          this.isAdmin = true;
        }else{
          this.isAdmin = false;
        }
      });
    }
  },
  mounted() {
    this.loadUserInfo();
    this.loadAddressList();
    this.getCartCount();
    this.getUserType();
  },
  comments: {
    // FootComponent,
    OrderView
  }
};
</script>

<style scoped>
/* 全局样式 */
:root {
  --primary-color: #409eff;
  --secondary-color: #67c23a;
  --danger-color: #f56c6c;
  --warning-color: #e6a23c;
  --info-color: #909399;
  --light-color: #f5f7fa;
  --dark-color: #303133;
}

/* 容器样式 */
.profile-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--light-color);
}

/* 头部样式 */
.profile-header {
  background-color: var(--primary-color);
  color: white;
  padding: 2rem 0;
}

.profile-header-content {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-info {
  display: flex;
  flex-direction: column;
}

.profile-name {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.profile-subtitle {
  color: rgba(255, 255, 255, 0.8);
}

/* 主内容样式 */
.profile-main {
  flex-grow: 1;
  padding: 2rem 0;
}

.profile-content {
  display: flex;
  gap: 2rem;
}

/* 侧边栏样式 - 调整宽度 */
.profile-sidebar {
  width: 220px; /* 调整为220px，适中显示图标和文字 */
  flex-shrink: 0;
}

.profile-nav {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.profile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-nav li {
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  transition: background-color 0.2s;
  border-left: 3px solid transparent;
}

.profile-nav li:hover {
  background-color: rgba(64, 158, 255, 0.05);
}

.profile-nav li.active {
  background-color: rgba(64, 158, 255, 0.1);
  border-left-color: var(--primary-color);
  color: var(--primary-color);
  font-weight: 500;
}

/* 标签内容样式 */
.profile-tabs {
  flex-grow: 1;
}

.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0f0f0;
  background-color: rgba(64, 158, 255, 0.03);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--dark-color);
}

.card-body {
  padding: 1.5rem;
}

/* 个人信息显示样式 */
.profile-info-tab .info-item {
  display: flex;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f5f5f5;
  align-items: center;
  gap: 0.5rem;
}

.profile-info-tab .info-item:last-child {
  border-bottom: none;
}

.profile-info-tab .info-label {
  width: 120px;
  color: var(--info-color);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profile-info-tab .info-value {
  flex-grow: 1;
  color: var(--dark-color);
}

.action-buttons {
  margin-top: 1.5rem;
  display: flex;
  justify-content: flex-end;
}

/* 表单样式 - 编辑资料居中 */
.edit-form-center {
  max-width: 500px;
  margin: 0 auto; /* 水平居中 */
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--dark-color);
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 表单操作按钮 */
.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  justify-content: center; /* 按钮居中 */
}

/* 按钮样式 */
.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}

.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.btn-primary {
  background-color: #66b1ff;
  color: white;
}

.btn-primary:hover {
  background-color: #66b1ff;
}

.btn-secondary {
  background-color: #e4e7ed;
  color: #606266;
  border: 1px solid #dcdfe6;
}

.btn-secondary:hover {
  background-color: #e4e7ed;
}

.btn-danger {
  background-color: #f78989;
  color: white;
}

.btn-danger:hover {
  background-color: #f78989;
}

.btn-outline-secondary {
  background-color: transparent;
  color: #606266;
  border: 1px solid #dcdfe6;
}

.btn-outline-secondary:hover {
  background-color: #f5f7fa;
}

/* 底部样式 */
.profile-footer {
  background-color: white;
  padding: 1.5rem 0;
  text-align: center;
  color: var(--info-color);
  border-top: 1px solid #f0f0f0;
}

/* 提示框样式 */
.toast {
  position: fixed;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem 1.5rem;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 1000;
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.success-toast {
  background-color: #f0f9eb;
  color: #67c23a;
  border: 1px solid #e1f3d8;
}

.error-toast {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fde2e2;
}

/* 地址管理样式 - 优化版 */
.profile-address-tab .empty-address {
  text-align: center;
  padding: 3rem 0;
  color: var(--info-color);
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
}

.address-form {
  overflow-x: auto; /* 允许表格在小屏幕上横向滚动 */
  display: block; /* 确保滚动容器正确显示 */
}

.address-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  table-layout: fixed; /* 固定列宽，确保表头和内容对应 */
}

.address-table td,
.address-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  word-break: break-word; /* 防止长文本溢出 */
  white-space: normal; /* 允许文本换行 */
  vertical-align: middle; /* 垂直居中 */
}

.address-table tr:last-child td {
  border-bottom: none;
}

.address-table tr:hover {
  background-color: #f9fafc;
}

.address-row:nth-child(even) {
  background-color: #f9fafc;
}

/* 响应式优化 - 小屏幕下表头样式调整 */
@media (max-width: 768px) {
  .address-table th,
  .address-table td {
    padding: 0.5rem;
    font-size: 0.9rem;
  }

  /* 小屏幕下优化列宽比例 */
  .address-table th:nth-child(1),
  .address-table td:nth-child(1) { width: 12%; }
  .address-table th:nth-child(2),
  .address-table td:nth-child(2) { width: 12%; }
  .address-table th:nth-child(3),
  .address-table td:nth-child(3) { width: 12%; }
  .address-table th:nth-child(4),
  .address-table td:nth-child(4) { width: 12%; }
  .address-table th:nth-child(5),
  .address-table td:nth-child(5) { width: 12%; }
  .address-table th:nth-child(6),
  .address-table td:nth-child(6) { width: 22%; }
  .address-table th:nth-child(7),
  .address-table td:nth-child(7) { width: 12%; }
  .address-table th:nth-child(8),
  .address-table td:nth-child(8) { width: 16%; }
}

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  background-color: var(--primary-color);
  border-radius: 0.25rem;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .profile-content {
    flex-direction: column;
  }

  .profile-sidebar {
    width: 100%;
  }

  .profile-header-content {
    flex-direction: column;
    text-align: center;
  }

  .form-actions {
    flex-direction: column;
  }
}
</style>
